<template>
  <div class="app-container">
    <el-row :gutter="5" style="justify-content: space-between;flex-wrap: nowrap;">
      <div v-show="leftIsShow" style="width: 20.6vw;">
        <LeftAreaItem />
      </div>
      <div v-show="!leftIsShow" style="width: 4vw;background-color: #fff;text-align: center;position: relative;">
        <el-button style="height: 40px;position: absolute;bottom: 0;left: 1vw;" @click="leftExpand" link>
          展开<el-icon>
            <DArrowRight />
          </el-icon>
        </el-button>
      </div>
      <div
        :style="leftIsShow ? (rightIsShow ? 'width: 57.8vw' : 'width: 76.4vw') : (rightIsShow ? 'width: 76.4vw' : 'width: 95vw')"
        style="height: 100%">
        <CenterAreaItem />
      </div>
      <div v-show="rightIsShow" style="width: 20.6vw;">
        <RightAreaItem />
      </div>
      <div v-show="!rightIsShow" style="width: 4vw;background-color: #fff;text-align: center;position: relative;">
        <el-button style="height: 40px;position: absolute;bottom: 0;right: 1vw;" @click="rightExpand" link>
          <el-icon>
            <DArrowLeft />
          </el-icon>展开
        </el-button>
      </div>
    </el-row>
  </div>
</template>
  
<script setup name="CommonTemplate">
import bus from "@/utils/eventBus";
import RightAreaItem from "../components/RightAreaItem.vue";
import LeftAreaItem from "./leftAreaItem.vue";
import CenterAreaItem from "../components/CenterAreaItem.vue";
const leftIsShow = ref(true);
const rightIsShow = ref(true);
function leftExpand() {
  leftIsShow.value = true;
}
function rightExpand() {
  rightIsShow.value = true;
}

bus.on("contractClick", (val) => {
  eval(val + 'IsShow.value = false;')
});
onBeforeUnmount(() => {
  bus.off("contractClick");
});
</script>
  
<style lang="scss" scoped>
.container {
  padding: 10px 0;
  min-height: calc(100vh - 84px);
}

:deep(.el-tabs__nav-scroll) {
  margin-left: 20px;
}

:deep(.el-collapse-item__header, .is-active) {
  margin-left: 8px;
  font-style: italic;
  font-weight: 700;
  border-top: transparent;
  color: #000;
}

:deep(.el-tabs__header) {
  margin: 0 0 0;
}
</style>
  